<style scoped>
.customerlist>>>.weui-form-preview__hd .weui-form-preview__value {
    font-size: 1.2em;
    padding-right: 20px;
}

.sellform {
    background: #e3e3e3;
}

.page-infinite-wrapper {
    background: #e3e3e3;
}

.sellform>>>.weui-cells {
    margin-top: 0;
    background: #e3e3e3;
}

.sellform>>>.weui-loadmore__tips {
    background: #e3e3e3;
    ;
}

.sellform>>>.weui-loadmore {
    margin-bottom: 0;
}

.weui-form-preview {
    margin: 5px;
    border-radius: 5px;
}

.rj-cell-child {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
    text-align: left;
}

.rj-cell-child.max span {
    font-size: 16px;
    padding-right: 20px;
}

.rj-cell-child.minpad {
    padding-right: 10px !important;
}

.rj-cell-child label {
    color: #333;
    font-size: 14px;
}

.rj-cell-child span {
    padding-left: 20px;
    font-size: 14px;
    color: #333;
}

.rj-cell-child .tip {
    font-size: 16px;
    color: #333;
}

.rj-cell-child i {
    font-size: 18px;
    font-style: normal;
    color: #333;
}

.rj-cell-child-tit {
    background: #eee;
    font-size: 14px;
    padding: 5px 15px;
    border-bottom: 1px solid #ddd;
}

.weui-form-preview__ft .weui-form-preview {
    background: #f5f5ef;
}

.weui-form-preview__ft {
    line-height: normal;
}

.weui_tab_bd {
    background: #eee;
}

.weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
}

.weui-form-preview__hd label,
.weui-form-preview__hd em {
    font-size: .9em !important;
}

.weui_navbar {
    white-space: nowrap;
    overflow: scroll;
    display: block !important;
    border-bottom: 1px solid #BCBAB6;
    font-size: 0;
    /*background: #fafafa;*/
}

.weui_navbar_item {
    font-size: 14px;
    display: inline-block;
    width: 50%;
    padding: 13px 0;
    background: #fff;
    position: relative;
    color: #888;
}

.weui_navbar_item.weui_bar_item_on {
    background-color: #f5f5f5;
    color: #00913a;
}

.weui_navbar:after {
    border-bottom: 0;
}

.weui_navbar_item:after {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    border-right: 1px solid #cccccc;
    color: #cccccc;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
    font-size: 10px;
}

.weui-panel__bd {
    text-align: left;
}

.hoverbar {
    background: #03A9F4;
    position: fixed;
    bottom: 100px;
    right: 20px;
    height: 50px;
    line-height: 50px;
    width: 50px;
    z-index: 100;
    font-size: 30px;
    border-radius: 50%;
    box-shadow: 0px 2px 3px rgba(100, 100, 100, 0.5);
    color: #fff;
}

.delsty {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 1000;
}
</style>
<template>
<div class="customerlist">
<!--    <div class="hoverbar" @click="addItem">+</div>-->
    <SearchBar @doSearch="doSearch" />
    <div class="weui_tab">
        <div class="weui_navbar order-tabhd">
            <a class="weui_navbar_item" :class="{ weui_bar_item_on: postParams.status == '0,9' }" href="javaScript:;" @click="switchType('0,9')">待确认</a>
            <a class="weui_navbar_item" :class="{ weui_bar_item_on: postParams.status == 1 }" href="javaScript:;" @click="switchType(1)">已确认</a>
        </div>
        <div class="weui_tab_bd" style="background-color: #fff">
            <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
                <mescroll-vue ref="mescroll" id="wrapper" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
                    <div class="weui-form-preview" v-for="(item, index) in data" :key="index" :ref="item.guid">
<!--                        <div class="delsty" @click="editIt(item.guid)"><img src="@/assets/icon-edit.png" style="width: 20px;" /> </div>-->
                        <div class="weui-form-preview__hd" @click="viewItem(item.guid)">
                            <label class="weui-form-preview__label">名称</label>
                            <em class="weui-form-preview__value">{{item.name}}</em>
                        </div>
                        <div class="weui-form-preview__bd">
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">客户类型</label>
                                <span class="weui-form-preview__value" v-if="item.flag===1" style="color: red;">电商客户</span>
                                <span class="weui-form-preview__value" v-if="item.flag===2" style="color: red;">普通客户</span>
                                <span class="weui-form-preview__value" v-if="item.flag===3" style="color: red;">海外客户</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">应收账款</label>
                                <span class="weui-form-preview__value" style="color: red;">{{item.recbalance}} {{item.currency == 2 ? '美元' : '元'}}</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">余额</label>
                                <span class="weui-form-preview__value" style="color: red;">{{item.prebalance}} {{item.currency == 2 ? '美元' : '元'}}</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">地址</label>
                                <span class="weui-form-preview__value">{{item.province + item.city + item.district}} {{item.address}}</span>
                            </div>
                            <div class="weui-form-preview__item" v-if="item.manager != ''">
                                <label class="weui-form-preview__label">商务联系人</label>
                                <span class="weui-form-preview__value">{{item.manager}}</span>
                            </div>
                            <div class="weui-form-preview__item" v-if="item.managertel != ''">
                                <label class="weui-form-preview__label">联系电话</label>
                                <span class="weui-form-preview__value">{{item.managertel}}</span>
                            </div>
                            <div class="weui-form-preview__item" v-if="item.contact != ''">
                                <label class="weui-form-preview__label">收货联系人</label>
                                <span class="weui-form-preview__value">{{item.contact}}</span>
                            </div>
                            <div class="weui-form-preview__item" v-if="item.contactno != ''">
                                <label class="weui-form-preview__label">联系电话</label>
                                <span class="weui-form-preview__value">{{item.contactno}}</span>
                            </div>
                            <div class="weui-form-preview__item" v-if="item.memail != ''">
                                <label class="weui-form-preview__label">邮箱</label>
                                <span class="weui-form-preview__value">{{item.memail}}</span>
                            </div>
                            <div class="weui-form-preview__item" v-if="item.financer != ''">
                                <label class="weui-form-preview__label">财务联系人</label>
                                <span class="weui-form-preview__value">{{item.financer}}</span>
                            </div>
                            <div class="weui-form-preview__item" v-if="item.fintel != ''">
                                <label class="weui-form-preview__label">联系电话</label>
                                <span class="weui-form-preview__value">{{item.fintel}}</span>
                            </div>
                            <div class="weui-form-preview__item" v-if="item.finemail != ''">
                                <label class="weui-form-preview__label">财务邮箱</label>
                                <span class="weui-form-preview__value">{{item.finemail}}</span>
                            </div>
                            <div class="weui-form-preview__item" v-if="item.registcapital != ''">
                                <label class="weui-form-preview__label">注册资金</label>
                                <span class="weui-form-preview__value">{{item.registcapital}} {{item.currency == 2 ? '万美元' : '万元'}}</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">状态</label>
                                <span class="weui-form-preview__value">{{item.statusname}}</span>
                            </div>
                            <div class="weui-form-preview__item" v-if="item.remark != ''">
                                <label class="weui-form-preview__label">备注</label>
                                <span class="weui-form-preview__value" style="color: #000;">{{item.remark}}</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">创建人</label>
                                <span class="weui-form-preview__value">{{item.operator}}</span>
                            </div>
                            <div class="weui-form-preview__item">
                                <label class="weui-form-preview__label">创建时间</label>
                                <span class="weui-form-preview__value">{{item.createtime}}</span>
                            </div>
                        </div>
                        <div class="weui-form-preview__ft" style="line-height: 50px;">
                          <template v-if="postParams.status == '0,9'">
                            <a class="weui-form-preview__btn weui-form-preview__btn_primary" v-if="hasPermis(8) && item.status == 0" @click="doConfirm(item.guid)">申请确认</a>
                            <a class="weui-form-preview__btn weui-form-preview__btn_primary" v-if="item.operatorid == userid && item.status == 9" @click="editIt(item.guid)">修改</a>
                          </template>
                          <template v-if="postParams.status == 1">
<!--                            <a class="weui-form-preview__btn weui-form-preview__btn_primary" @click="doAct(item.guid)">{{item.status == 1 ? "禁用" : "启用"}}</a>-->
                            <a class="weui-form-preview__btn weui-form-preview__btn_primary" v-if="item.operatorid == userid" @click="editIt(item.guid)">修改</a>
                            <a class="weui-form-preview__btn weui-form-preview__btn_primary" @click="recharge(item.guid, 1)">预收款</a>
                          </template>
                        </div>
                    </div>
                </mescroll-vue>
            </div>
        </div>
    </div>

</div>
</template>

<script>
import MescrollVue from 'mescroll.js/mescroll.vue'
import SearchBar from '../common/SearchBar'

export default {
    name: 'CustomerList',
    components: {
        SearchBar,
        MescrollVue
    },
    data() {
        return {
            wrapperHeight: 600,
            data: [],
            postParams: {
                status: '0,9',
                functiontype: 13
            },
            mescroll: null, // mescroll实例对象
            mescrollDown: {},
            mescrollUp: { // 上拉加载的配置.
                callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
                page: {
                    num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                    size: 5 //每页数据条数,默认10
                },
                htmlNodata: '<p class="upwarp-nodata">-- 我是有底线的 --</p>',
                noMoreSize: 1,
                empty: {
                    warpId: "wrapper", //父布局的id (1.3.5版本支持传入dom元素)
                    tip: "暂无相关数据~" //提示
                }
            },
            wrapperHeight: 600,
            userid: localStorage.userid,
            permissions: [],
        }
    },
    created() {        //列表页头部不允许滑动
        document.getElementsByTagName("body")[0].className = "bg";
    },
    mounted() {
        this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top - 40;
        this.userid = localStorage.userid;
        this.getPermission()

        if (this.$route.query.code != undefined) {
            this.postParams.search = this.$route.query.code;
        }
        if (this.$route.query.status != undefined) {
            this.postParams.status = this.$route.query.status;
        }
    },
  computed: {
  },
    methods: {
      hasPermis: function(permis) {
        if (this.permissions.length == 0) return;
        return this.permissions.some(item =>{
          return item.permission == permis;
        });
      },
      doConfirm: function(id) {
        let that = this;
        $.modal({
          title: '申请确认',
          buttons: [
            { text: "通过", onClick: function(){
                that.doApproval(id, 1);
              }},
            { text: "拒绝", className: "default", onClick: function(){
                that.doApproval(id, 9);
              }},
            { text: "取消", className: "default", onClick: function(){
                return;
              }},
          ]
        });
      },
      doApproval: function(cid, status) {
        this.axios({
          method: 'post',
          params: {
            customerid : cid,
            status: status
          },
          url: '/sales/Customer!approval.action',
        }).then((response) => {
          if (response.data.msg == 'success') {
            this.toastText('操作成功');
            this.getPageData();
          } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
            //不不设置提示
          } else {
            this.toastError("系统错误");
          }

        })
      },
        editIt: function (id) {
            this.$router.push({
                name: 'EditCustomer',
                query: {
                    id: id
                }
            });
        },
        getPermission: function () {
            this.axios({
                method: 'get',
                params: {
                    opttype: 13
                },
                url: '/produce/OperatorPermission!getOperPerm.action',
            }).then((response) => {
                if (response.data.msg == 'success') {
                    this.$nextTick(() => {
                        this.permissions = response.data.permission;
                    })
                } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
                    //不不设置提示
                } else {
                    this.toastError("系统错误");
                }

            })
        },
        addItem: function () {
            this.$router.push({
                name: 'AddCustomer'
            });
        },
        mescrollInit(mescroll) {
            this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
        },
        upCallback(page, mescroll) {
            this.postParams.pageNo = page.num;
            this.postParams.pageSize = page.size;
            // 联网请求
            this.axios({
                method: 'get',
                url: '/sales/Customer!page.action',
                params: this.postParams
            }).then((response) => {
                if (response.data.msg == 'success') {
                    let res = response.data.pagelist != undefined ? response.data.pagelist : {
                        rows: []
                    };

                    // 如果是第一页需手动置空列表
                    if (page.num === 1 && this.data.length != 0) this.data = [];
                    // 把请求到的数据添加到列表
                    this.data = this.data.concat(res.rows);
                    // 数据渲染成功后,隐藏下拉刷新的状态
                    this.$nextTick(() => {
                        mescroll.endSuccess(res.rows.length)
                    })
                    //将获取上一访问列表临时页码恢复正常
                    if (this.mescrollUp.page.size > 5) {
                        this.mescrollUp.page.num = this.$store.state.list.pageNo;
                        this.mescrollUp.page.size = 5;
                    }
                } else if (response.data.msg == 'outlogin') {
                    this.toastText('会话过期，请重新登录');
                } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
                    //不不设置提示
                } else {
                    this.toastError("系统错误");
                }

            }).catch((e) => {
                // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                mescroll.endErr()
            })
        },
        doAct: function (id) {
            let that = this;
            $.confirm("确定要禁用该客户吗？", function () {
                that.axios({
                    method: 'post',
                    url: '/sales/Customer!unable.action',
                    params: {
                        customerid: id
                    }
                }).then((response) => {
                    if (response.data.msg == 'success') {
                        that.toastSuccess('操作成功！');
                        that.getPageData();
                    } else if (response != undefined && response.data != undefined && response.data.msg == 'sessionTimeOut') {
                        //不不设置提示
                    } else {
                        that.toastError("系统错误");
                    }
                })

            })
        },
        doSearch: function (keywords) {
            this.postParams.search = keywords;
            this.getPageData();
        },
        viewItem: function (id) {
            this.$router.push({
                name: 'ViewCustomer',
                query: {
                    id: id
                }
            });
        },
        getPageData: function () {
            $('#wrapper').scrollTop(0);
            this.data = [];
            this.mescroll.resetUpScroll();
        },
        switchType: function (type) {
            this.postParams.status = type;
            this.getPageData();
        },
        recharge: function (id, type) {
            this.$router.push({
                name: 'Recharge',
                query: {
                    id: id,
                    type: type
                }
            });
        }
    },
    activated() {
        //列表页头部不允许滑动
        document.getElementsByTagName("body")[0].className = "bg";

        //判断是否是返回上一页
        if (this.$store.state.list.reffer != this.$options.name) return;
        //获取上一次访问列表数据
        this.mescrollUp.page.num = 0;
        this.mescrollUp.page.size = this.$store.state.list.pageNo * this.mescrollUp.page.size;
        this.getPageData();
        //定位
        this.$nextTick(function () {
            let position = this.$store.state.list.postion //返回页面取出来
            $('#wrapper').scrollTop(position);
            let status = this.$store.state.list.status;
            this.postParams.status = status;
            if (status == 66 || status == 77) {
                $('.order-tabhd').scrollLeft(1500);
            }
        })
    },
    beforeRouteLeave(to, from, next) {
        //取消列表页头部不允许滑动
        document.body.removeAttribute("class", "bg");

        let position = $('#wrapper').scrollTop();
        let status = this.postParams.status;
        this.$store.commit('setPosition', position) //离开路由时把位置存起来
        this.$store.commit('setStatus', status)
        this.$store.commit('setPageNo', this.mescrollUp.page.num);
        this.$store.commit('setReffer', this.$options.name);
        next()
    }
}
</script>
